import { Button, Modal, Alert, Input, Col, Row, Icon } from 'antd';
import { NakePanel, LayerLink } from 'comps/common';
import RunnableUnit from './runnable-unit';
import RunnableUnitImport from '../containers/runnable-unit-import';
import _ from 'lodash';
import * as React from 'react';

class UnitDeleteModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      unitId: undefined
    };
  }

  show(unitId) {
    this.setState({ visible: true, unitId });
  }

  handleOk() {
    if (this.state.unitId === undefined) {
      return;
    }
    this.props.onUnitDelete(this.state.unitId)
      .then(() => {
        this.setState({ visible: false });
      });
  }

  handleCancel() {
    this.setState({ visible: false, unitId: undefined });
  }

  render() {
    return (
      <Modal visible={this.state.visible}
        title='删除运行单元'
        confirmLoading={this.props.confiming}
        onOk={::this.handleOk}
        onCancel={::this.handleCancel}
      >
        <Alert message='确定要删除吗？' description='删除后无法恢复，正在运行的实例也不会停止，如果包含子单元，也会一并删除。请确认后谨慎操作。' type='error'/>
      </Modal>
    );
  }
}

class RuntimeDeleteModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      confirmDisabled: true
    };
  }

  onConfirmInputChange(text) {
    this.setState({ confirmDisabled: text !== '确认删除' });
  }

  show() {
    this.setState({ visible: true });
  }

  handleOk() {
    this.setState({ loading: true });
    this.props.handleOk()
      .then(() => {
        this.setState({ loading: false, visible: false });
      });
  }

  handleCancel() {
    this.setState({ visible: false, confirmDisabled: true });
  }

  render() {
    return (
      <Modal visible={this.state.visible}
        title='删除运行时' onOk={::this.handleOk} onCancel={::this.handleCancel}
        footer={[
          <Button key='cancel' type='ghost' onClick={::this.handleCancel}>取消</Button>,
          <Button key='submit' type='primary' onClick={::this.handleOk} loading={this.state.loading} disabled={this.state.confirmDisabled}>确定</Button>
        ]}
      >
        <Alert message='确定要删除吗？' description='删除后无法恢复，正在运行的实例也不会停止，将会脱离 PaaS 的维护范围，请确认并谨慎操作。' type='error'/>
        <Input addonBefore='输入 “确认删除” 以确认' onChange={(evt) => this.onConfirmInputChange(evt.target.value)}/>
      </Modal>
    );
  }
}

class RunnableRuntime extends React.Component {
  render() {
    const { id, groupId, isFetching, isBuilding, units = [], onRuntimeDelete, onRefresh, unitDeleteFetching, onUnitDelete } = this.props;
    return (
      <NakePanel spinner={isFetching || isBuilding} className='runnable-runtime'>
        <RuntimeDeleteModal ref='deleteConfirm' handleOk={() => onRuntimeDelete(id)}/>
        <UnitDeleteModal ref='unitDeleteConfirm' confiming={unitDeleteFetching} onUnitDelete={onUnitDelete}/>
        {_.isEmpty(units)
          ? (
          <Alert showIcon type='info' message='导入运行单元来维护运行时'
            description='你还未导入任何运行单元，通过导入 Linner 工程、Maven 工程或已存在的 Docker Image 来开始维护运行时。'
          />
        ) : undefined}
        <Row style={{ marginBottom: '10px' }}>
          <Col span='2'>
            <a onClick={onRefresh} className='block-link'><Icon type='reload'/> 刷新</a>
          </Col>
          <Col span='21' offset='1'>
            <LayerLink component={RunnableUnitImport} data={{ runtimeId: id, groupId }} title='导入运行单元'
              className='block-link'
            >
              <Icon type='plus-circle-o'/> 导入运行单元
            </LayerLink>
          </Col>
        </Row>
        <ul className='table-list'>
          {units.map(unit => (
            <RunnableUnit key={unit.id} unit={unit} unitDeleteConfirm={this.refs.unitDeleteConfirm}/>
          ))}
        </ul>
        <a className='block-link danger delete-runtime-link' onClick={() => this.refs.deleteConfirm.show()}>
          <Icon type='trash'/> 移除运行环境
        </a>
      </NakePanel>
    );
  }
}

export default RunnableRuntime;
